<template>
  <div class="welcome">
    <el-container style="height:100%">
      <el-aside width="auto" style="background-color:#2f4050;height:100%">
        <div class="imgbox">
          <img class="avatar" src="../assets/2.jpg" alt="">
          <p>占位</p>
        </div>
        <el-menu class="el-menu-vertical-demo" :router="true" @open="handleOpen" @close="handleClose" background-color="#2f4050" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="users">
            <i class="el-icon-menu"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-submenu index="">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">分类管理</span>
            </template>
            <el-menu-item index="firstCategory">一级分类管理</el-menu-item>
            <el-menu-item index="secondCategory">二级分类管理</el-menu-item>
          </el-submenu>
          <el-menu-item index="product">
            <i class="el-icon-menu"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="btnbox">
            <span class="myicon myicon-menu toggle-btn"></span>
          </div>
          <span class="title">乐淘后台管理系统</span>
          <el-button type="primary" @click="loginOut">退出</el-button>
        </el-header>
        <el-main>
          <router-view></router-view>
          <img src="../assets/main.jpg" alt="" v-show="$route.path==='/'">
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { loginOut } from '@/api/index'
export default {
  methods: {
    loginOut () {
      loginOut().then(res => {
        this.$message({
          message: '已退出登录',
          type: 'warning'
        })
        this.$router.push({'path': '/login'})
      })
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang='scss' scoped>
.welcome {
  height: 100%;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-container {
    width: auto;
    .el-aside {
      .imgbox {
        width: 100%;
        height: 180px;
        background-color: #243443;
        padding-top: 40px;
        // position: relative;
        .avatar {
          box-sizing: border-box;
          display: block;
          margin: 0 auto;
          //   position: absolute;
          //   left: 50%;
          //   top: 50%;
          //   transform: translate(-50%, -50%);
          width: 80px;
          height: 80px;
          box-sizing: border-box;
          border-radius: 50%;
          box-shadow: 0px 0 0px 4px #2f4050;
          overflow: hidden;
        }
        p {
          margin-top: 10px;
          text-align: center;
          color: #a9b0c2;
        }
      }
    }
    .el-header {
      display: flex;
      align-items: center;
      .btnbox {
        width: 30px;
        height: 30px;
        background-color: #243443;
        .toggle-btn {
          // padding: 0 10px;
          margin-right: 2px;
          line-height: 30px;
          font-size: 24px;
          color: white;
          cursor: pointer;
          //   line-height: 60px;
          // &:hover {
          //   background-color: #4292cf;
          // }
        }
      }
      .title {
        flex: 1;
        font-size: 30px;
        text-align: center;
      }
    }
    .el-main {
      img {
        width: 100%;
        background-size: cover;
      }
    }
  }
}
</style>
